<!-- 
 * 我的消息
 * @author: 
 * @since: 2022-06-14
 * index.vue
-->
<template>
    <div class="my-info-container">
        <div class="tabs">
            <div :class="[state.isTabActive === index ? 'isActive' : '', 'tabs-item']" v-for="(item, index) in tabsList" :key="index" @click="clickTabs(index)">
                <span>{{ item.key }}</span>
                <span>({{ item.num }})</span>
            </div>
        </div>
        <div class="list" v-loading="loading">
            <el-empty description="暂无数据" v-if="state.list.length < 1" />
            <div class="list-item" v-for="(item, index) in state.list" :key="index" @click="clickInfoItem(item)" v-else>
                <div class="top">
                    <div :class="[item.readStatus ? 'already' : 'unread', 'status']">{{ item.readStatus ? '已读' : '未读' }}</div>
                    <div class="title">{{ item.messageTitle }}</div>
                </div>
                <div class="content">{{ item.message }}</div>
                <div class="time">{{ item.insertDate }}</div>
            </div>
        </div>
        <div class="paging">
            <el-pagination background :currentPage="state.pagination.currentPage" :page-size="state.pagination.size" :total="state.pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="state.pagination.currentPage" layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"></el-pagination>
        </div>
        <el-dialog v-model="isShowDialog" :title="state.currentItem.messageTitle" width="450px" :before-close="dialogClose" class="dialog">
            <div class="content">{{ state.currentItem.message }}</div>
            <div class="time">{{ state.currentItem.insertDate }}</div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogClose">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, inject } from 'vue'
import { getMyInfoListApi, getUserReadNumApi, changeReadStatusApi } from '@/api/interface/personCenter.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const reload = inject('reload')

const tabsList = reactive([
    {
        key: '全部',
        total: null
    },
    {
        key: '已读',
        readTotal: null
    },
    {
        key: '未读',
        notReadTotal: null
    }
])

const state = reactive({
    isTabActive: 0,
    pagination: {//分页
        currentPage: 1,
        size: 10,
        total: 0

    },
    list: [],//列表
    currentItem: {}//当前点击的列表数据
})

const loading = ref(true)
const isShowDialog = ref(false)

onMounted(() => {
    getMyInfoList()
    getUserReadNum()

})


//获取我的消息列表
const getMyInfoList = () => {
    loading.value = true
    let readStatus = null
    switch (state.isTabActive) {
        case 0://全部
            readStatus = ''
            break;
        case 1://已读
            readStatus = true
            break;
        case 2://未读
            readStatus = false
            break;

    }
    const params = {
        ipi: state.pagination.currentPage,
        ips: state.pagination.size,
        readStatus: readStatus
    }
    getMyInfoListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            loading.value = false
            state.list = data.result
            state.pagination.currentPage = data.pageNum
            state.pagination.size = data.pageSize
            state.pagination.total = data.total


        }

    })

}

//获取用户阅读统计
const getUserReadNum = () => {
    getUserReadNumApi().then(res => {
        const { status, data } = res
        if (status === 200) {
            for (let key in data) {
                tabsList.forEach(item => {
                    if (item.hasOwnProperty(key)) {
                        item[key] = data[key]
                        item.num = data[key]
                    }
                })

            }
        }
    })
}

//更新用户阅读状态
const changeReadStatus = (id) => {
    const params = {
        id: id
    }
    changeReadStatusApi(params).then(res => {
        const { status } = res
        if (status == 200) {
            getMyInfoList()
            // getUserReadNum()

        }
    })
}

//点击每条消息
const clickInfoItem = (item) => {
    //   isShowDialog.value = true
    switch (item.businessType) {
        case 'DEMAND':
            router.push({ name: 'CheckNeed', params: { id: item.businessNum, type: 'check' } })
            break
        case 'RESULT':
            router.push({ name: 'CheckAchieve', params: { id: item.businessNum, type: "check" } })
            break

    }
    state.currentItem = item
    changeReadStatus(state.currentItem.id)
}

//点击tab
const clickTabs = (index) => {
    state.isTabActive = index
    getMyInfoList()
}

//条数
const handleSizeChange = (val) => {
    state.pagination.size = val
    getMyInfoList()
}

//页数
const handleCurrentChange = (val) => {
    state.pagination.currentPage = val
    getMyInfoList()

}

//点进弹窗确定关闭
const dialogClose = () => {
    isShowDialog.value = false
    reload()


}


</script>

<style lang="scss" scoped>
.my-info-container {
    :deep(.el-dialog__body) {
        padding: 0 20px !important;

        .content {
            color: #333333;
            font-size: 14px;
        }

        .time {
            font-size: 12px;
            color: #999;
            margin-top: 10px;
        }
    }

    .unread {
        //未读
        background: #f74b33;
    }

    .already {
        //已读
        background: #ced6ea;
    }

    .tabs {
        display: flex;
        margin: 20px 0;

        .tabs-item {
            margin-right: 30px;
            cursor: pointer;
            color: #333;
            font-size: 14px;
        }

        .isActive {
            font-weight: bold;
            color: #00a2ff;
        }
    }

    .list {
        width: 100%;

        &-item {
            box-shadow: 0px 10px 10px 0px rgba(164, 171, 201, 0.2);
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            padding: 20px;
            box-sizing: border-box;
            margin-bottom: 10px;
            cursor: pointer;

            &:hover {
                border: 1px solid #00a2ff;
            }

            .top {
                display: flex;

                .status {
                    color: #fff;
                    font-size: 12px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 2px;
                    margin-right: 3px;
                    border-radius: 2px;
                }

                .title {
                    font-size: 14px;
                    font-weight: bold;
                }
            }

            .content {
                display: inline-block;
                white-space: nowrap;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 12px;
                color: #666;
                margin: 15px 0 10px 0;
            }

            .time {
                color: #999;
                font-size: 12px;
            }
        }
    }

    .paging {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
}
</style>
